<template>
<div class="userinfo">
    <div class="ani1">
        <ul class="clearfix" v-if="userinfo">
            <li><span>登录账号</span>{{userinfo.username}}</li>
            <li><span>用户姓名</span>{{userinfo.name}}</li>
            <li><span>用户类型</span>{{userinfo.usertype ? '业务员' : '-'}}</li>
            <li><span>手机号码</span>{{userinfo.mobile ? userinfo.mobile : '-'}}</li>
            <li><span>注册时间</span>{{time(userinfo.createtime)}}</li>
            <li><span>最后登录</span>{{time(userinfo.lastlogintime)}}</li>
        </ul>
        <el-button type="primary" @click="logout()">退出登录</el-button>
    </div>
</div>
</template>
<script>
export default {
	name: 'Home',
	data(){
		return{
			userinfo: '',
		}
	},
	mounted(){
		let userinfo  = this.$storage.localGet('userinfo');
		if(userinfo.logincode !== undefined){
            this.userinfo = userinfo
		}else{
			this.$router.push('/login');
		}
	},
	methods:{
        logout(){
            let vm = this,
            arr  = {
				password: '',
				username: this.userinfo.username,
				checked : true
			};
            vm.$router.push('/login');
            vm.$storage.localSet('userinfo',arr);
        },
        time(timestamp) {
            if(timestamp == null){
                return '-'
            }
            let date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        }
    }
}
</script>
<style lang="less" scoped>
.userinfo{
    margin: 0 10px;
    .ani1{
        @media screen and (max-width: 800px) {
            padding: 10px;
	    }
        @media screen and (min-width: 801px) {
            padding: 60px 100px;
        }
        border-radius: 12px;
        background-color: #fff;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0,.5);
    }

    

    ul{
        padding: 0;
        list-style: none;
        li{
            width: 50%;
            font-size: 14px;
            padding: 12px;
            float: left;
            border-bottom: 1px solid #eee;
            display: flex;
            span{
                color: #666;
                display: block;
                margin-right: 10px;
                position: relative;
                &::after{
                    content: ':';
                    padding: 0 5px;
                    display: inline-block;

                }
            }
        }
    }
    .el-button{
        display: block;
        width: 100%;
        margin: 20px 0 0;
        border-radius: 5px;
        border: none;
    }
    .loop(@n, @i: 1) when (@i =< @n) {
        .ani@{i} {
            transition: all 0.3s linear;
            animation-name: toLeft; // toBottom
            animation-duration: 1s; // 注释掉 会没有动画 就是帕帕一帧一帧的出来
            animation-fill-mode: both;
            animation-delay: (@i * 100 + 100ms);
        }
        .loop(@n, (@i + 1));
    }
    .loop(11);
    @keyframes toLeft {
        0% {
            opacity: 0;
            transform: translate3d(-30px, 0, 0);
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}
</style>